<script setup>
import { computed, onMounted, ref, watch } from "vue";
import Blog from "./Blog.vue";
import Pagination from "./Pagination.vue";
import { inject } from "vue";

const axios = inject("axios");

// 响应式变量
let blog0 = ref([]);
let blog1 = ref([]);
let blog2 = ref([]);
let currentPage = ref(1);
let total = ref(0);
let perpage = 9;
let isLoading = ref(true); // 加载状态标志

onMounted(() => {
    loadBlogs(currentPage.value);
});

// 监听 currentPage 的变化，当页码改变时重新加载数据
watch(currentPage, (newPage) => {
    console.log("页码变化，重新加载数据:", newPage);
    loadBlogs(newPage);
});

function loadBlogs(pageNum) {
    isLoading.value = true;
    axios
        .get(`/articles/${pageNum}`)
        .then((resp) => {
            // 设置数据
            blog0.value = resp.data.vec1 || [];
            blog1.value = resp.data.vec2 || [];
            blog2.value = resp.data.vec3 || [];
            currentPage.value = resp.data.page_num || 1;
            total.value = resp.data.total || 0;
            isLoading.value = false;
            console.info("数据加载完成，当前页码:", currentPage.value);
        })
        .catch((err) => {
            console.error("Error fetching data:", err);
            isLoading.value = false;
        });
}

// 将所有博客合并成一个数组用于移动端布局
const allBlogs = computed(() => {
    return [...blog0.value, ...blog1.value, ...blog2.value];
});
</script>

<template>
    <!-- 主要内容容器，使用flex布局确保footer在底部 -->
    <div class="main-content-wrapper">
        <!-- 博客内容区域，可以伸缩 -->
        <div
            class="blog-content"
            :class="{ 'has-pagination': total > perpage }"
        >
            <!-- 移动端布局：单列显示 -->
            <div
                class="d-block d-md-none"
                v-if="!isLoading && allBlogs.length > 0"
            >
                <div class="row justify-content-center">
                    <div class="col-12 col-sm-10">
                        <div
                            v-for="blog in allBlogs"
                            :key="blog.id"
                            class="mb-4"
                        >
                            <Blog :blog="blog"></Blog>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 平板布局：双列显示 -->
            <div
                class="d-none d-md-block d-lg-none"
                v-if="!isLoading && allBlogs.length > 0"
            >
                <div class="row">
                    <div class="col-6">
                        <div
                            v-for="blog in blog0.concat(blog1)"
                            :key="blog.id"
                            class="mb-4"
                        >
                            <Blog :blog="blog"></Blog>
                        </div>
                    </div>
                    <div class="col-6">
                        <div v-for="blog in blog2" :key="blog.id" class="mb-4">
                            <Blog :blog="blog"></Blog>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 桌面端布局：三列显示 -->
            <div
                class="d-none d-lg-block"
                v-if="!isLoading && allBlogs.length > 0"
            >
                <div class="row">
                    <div class="col-lg-4 col-xl-4">
                        <div v-for="blog in blog0" :key="blog.id" class="mb-4">
                            <Blog :blog="blog"></Blog>
                        </div>
                    </div>
                    <div class="col-lg-4 col-xl-4">
                        <div v-for="blog in blog1" :key="blog.id" class="mb-4">
                            <Blog :blog="blog"></Blog>
                        </div>
                    </div>
                    <div class="col-lg-4 col-xl-4">
                        <div v-for="blog in blog2" :key="blog.id" class="mb-4">
                            <Blog :blog="blog"></Blog>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 加载中的占位符 -->
            <div v-if="isLoading" class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">加载中...</p>
            </div>

            <!-- 无数据提示 -->
            <div
                v-if="!isLoading && allBlogs.length === 0"
                class="text-center py-5"
            >
                <p class="text-muted">暂无博客内容</p>
            </div>
        </div>

        <!-- 底部固定区域：分页 + 声明 -->
        <div
            class="footer-section"
            :class="{ 'with-pagination': total > perpage }"
        >
            <!-- 分页组件 -->
            <div
                class="pagination-container"
                v-if="!isLoading && total > perpage"
            >
                <Pagination
                    :total="total"
                    :pageSize="perpage"
                    :currentPage="currentPage"
                    @toPageNum="
                        (pageNum) => {
                            console.log('收到子组件传递的页码:', pageNum);
                            currentPage = pageNum;
                        }
                    "
                ></Pagination>
            </div>
        </div>
    </div>
</template>

<style scoped>
/* 主容器使用flex布局 */
.main-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 150px); /* 根据你的实际布局调整 */
}

/* 博客内容区域，可以伸缩 */
.blog-content {
    flex: 1 0 auto; /* 可以伸展，但不能收缩 */
    width: 100%;
}

/* 有分页时的特殊处理 */
.blog-content.has-pagination {
    padding-bottom: 20px; /* 为分页留出空间 */
}

/* 底部固定区域 */
.footer-section {
    flex-shrink: 0; /* 不能收缩 */
    width: 100%;
    background-color: transparent;
}

/* 有分页时的底部区域 */
.footer-section.with-pagination {
    margin-top: auto; /* 确保在底部 */
}

/* 分页容器 */
.pagination-container {
    padding: 1rem 0;
    background-color: transparent;
}

/* 声明部分 */
.declaration-section {
    padding: 1rem 0;
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
}

/* 响应式间距调整 */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .main-content-wrapper {
        min-height: calc(100vh - 120px); /* 移动端调整高度 */
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pagination-container {
        padding: 0.75rem 0;
    }

    .declaration-section {
        padding: 0.75rem 0;
    }
}

/* 平板优化 */
@media (min-width: 768px) and (max-width: 992px) {
    .col-6 {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* 桌面端优化 */
@media (min-width: 1200px) {
    .col-lg-4 {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* 分页组件响应式 */
@media (max-width: 576px) {
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* 确保在内容很少时，footer固定在底部 */
@media (min-height: 600px) {
    .main-content-wrapper {
        position: relative;
    }

    .footer-section {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
}

/* 打印样式 */
@media print {
    .footer-section {
        position: relative;
    }
}
</style>
